// 模糊查询开始
const header_search = document.querySelector('.header-search')
const search_list = document.querySelector('.search-list')
const searchArr =
  ['小米12',
    '小米13',
    '华为mate60pro',
    '华为手表',
    '苹果手机',
    '小米电视',
    '小米平板',
    '苹果12',
    '苹果13',
    '苹果手表']
function fuzzySearch(keyword) {
  const regex = new RegExp(keyword, 'i') // 'i' 表示不区分大小写
  return searchArr.filter(item => regex.test(item))
}

function renderResults(results) {//搜索结果的数组
  search_list.innerHTML = "" //先清空
  results.forEach(result => { // forEach 方法遍历搜索结果数组 results 中的每一个元素
    const item = document.createElement('p') //创建一个新的 div 元素，用来显示搜索结果。
    item.classList.add('resultItem') //为新创建的 div 元素添加了 resultItem 类,便于添加样式
    item.textContent = result //将当前搜索结果设置为新创建的 div 元素的文本内容
    item.addEventListener("click", () => {
      header_search.value = result
      search_list.innerHTML = ""
    })
    search_list.appendChild(item)
  })
}

header_search.addEventListener("input", () => {
  const keyword = header_search.value.trim() //使用 trim() 方法去除前后的空格，确保搜索关键词不包含额外的空格。
  if (keyword) {
    const results = fuzzySearch(keyword);
    renderResults(results);
  } else {
    search_list.innerHTML = ""
  }
})
// 模糊查询结束


// 轮播图开始
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
const img = document.querySelector('.slide-banner a img')
const lis = document.querySelectorAll('.banner-btn li')
const slideBanner = document.querySelector('.slide-banner')

// 定义一个数组存放图片路径
const arrImg = ['./img/1.webp', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.webp', './img/6.webp', './img/7.jpg', './img/8.jpg']
let index = 0

// 封装函数，实现图片路径的切换
function cutImg() {
  for (let i = 0; i < arrImg.length; i++) {
    lis[i].className = ''
  }
  img.src = arrImg[index]
  lis[index].className = 'banner-active'
}
// 定时器,每三秒自动切换下张图片
let timer = setInterval(function () {
  index++
  if (index > arrImg.length - 1) {
    index = 0;
  }
  cutImg()
}, 3000)

// 点击上一个按钮，实现图片的切换
prev.onclick = function () {
  index--
  if (index < 0) {
    index = arrImg.length - 1
  }
  cutImg()
}
// 点击下一个按钮，实现图片的切换
next.onclick = function () {
  index++
  if (index > arrImg.length - 1) {
    index = 0
  }
  cutImg()
}
// 鼠标移入轮播图的停止切换
slideBanner.onmouseover = function () {
  clearInterval(timer)
}
// 鼠标移出轮播图的开始切换
slideBanner.onmouseout = function () {
  timer = setInterval(function () {
    index++
    if (index > arrImg.length - 1) {
      index = 0;
    }
    cutImg()
  }, 3000)
}
// 轮播图结束

//秒杀开始
function getCountTime() {
  const next1 = document.querySelector('.next1')
  const hour = document.querySelector('#hour')
  const minutes = document.querySelector('#minutes')
  const scond = document.querySelector('#scond')

  const date = new Date()
  next1.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
  // 现在的时间戳
  const now = +new Date()
  // 将来的时间戳
  const after = +new Date('2024-12-18 18:30:00')
  const result = (after - now) / 1000

  let h = parseInt(result / 60 / 60 % 24) // 计算小时
  let m = parseInt(result / 60 % 60); // 计算分数
  let s = parseInt(result % 60); // 计算当前秒数
  h = h < 10 ? '0' + h : h
  m = m < 10 ? '0' + m : m
  s = s < 10 ? '0' + s : s
  hour.innerHTML = h
  minutes.innerHTML = m
  scond.innerHTML = s
}
getCountTime()
setInterval(getCountTime, 1000)


//秒杀结束
// 页面滚到对应位置显示
function setupElevator() {
  //获取元素
  const elevator = document.querySelector('.elevator')
  // 1.当页面滚动大于300px，显示电梯导航
  // 2.给页面添加滚动事件
  window.addEventListener('scroll', function () {
    const n = document.documentElement.scrollTop
    // console.log(n);
    if (n >= 300) {
      elevator.style.opacity = 1
    } else {
      elevator.style.opacity = 0
    }
  })
}
setupElevator()

//点击回到顶部会回到顶部
const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', function () {
  // document.documentElement.scrollTop = 0
  //平滑的回到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' });
})


// 点击导航对应小模块，页面会跳到对于大模块的位置
function eleOnClick() {
  const elevator = document.querySelector('.elevator')
  elevator.addEventListener('click', function (e) {
    // console.log(11);
    if (e.target.tagName == 'A') {
      // 先获取active
      const old = document.querySelector('.elevator .active')
      if (old) {
        //old = null 为 false
        //判断 如果原来有active类的对象，就移除类，如果一开始没有，就不删除，不报错
        old.classList.remove('active')
      }
      e.target.classList.add('active')
    }
  })
}
eleOnClick()
const miaosha = document.querySelector('#miaosha')
miaosha.addEventListener('click', function () {

  //平滑的回到顶部
  window.scrollTo({ top: 700, behavior: 'smooth' });
})
const youxuan = document.querySelector('#youxuan')
youxuan.addEventListener('click', function () {

  //平滑的回到顶部
  window.scrollTo({ top: 970, behavior: 'smooth' });
})
const guangchang = document.querySelector('#guangchang')
guangchang.addEventListener('click', function () {

  //平滑的回到顶部
  window.scrollTo({ top: 1290, behavior: 'smooth' });
})
const tuijian = document.querySelector('#tuijian')
tuijian.addEventListener('click', function () {

  //平滑的回到顶部
  window.scrollTo({ top: 1600, behavior: 'smooth' });
})


// 页面滚动
window.addEventListener('scroll', function () {
  // 先移除类
  const old = document.querySelector('.elevator .active')
  // console.log(old)
  if (old) { //old = null 为 false
    //判断 如果原来有active类的对象，就移除类，如果一开始没有，就不删除，不报错
    old.classList.remove('active')
  }
  // 判断页面当前滑动的位置，选择小盒子
  const n = document.documentElement.scrollTop
  if (n > 700 && n < 970) {
    document.querySelector('#miaosha').classList.add('active')
  } else if (n > 970 && n < 1285) {
    document.querySelector('#youxuan').classList.add('active')
  } else if (n > 1290 && n < 1600) {
    document.querySelector('#guangchang').classList.add('active')
  } else if (n > 1590) {
    document.querySelector('#tuijian').classList.add('active')
  }

})







